{% extends "base.html" %}

{% block content %}
<title>{{ title }} - {{ video.title }}</title>
<div class="container mt-4">
    
    <!-- 视频播放区 -->
    <div class="card shadow-lg">
        <div class="card-body">
            <h3 class="card-title mb-4 text-center">播放视频</h3>
            <div id="dplayer" class="rounded overflow-hidden"></div>
        </div>
    </div>
    
    <!-- 视频信息区 -->
    <div class="card shadow-lg mb-4">
        <div class="row g-0">
            <!-- 视频封面 -->
            <div class="col-md-4">
                <img src="{{ url_for('static', filename='uploads/covers/' + video.cover_filename) }}" 
                     class="card-img-top rounded-start" 
                     alt="封面图片">
            </div>
            <!-- 视频详细信息 -->
            <div class="col-md-8">
                <div class="card-body">
                    <h1 class="card-title text-primary mb-3">{{ video.title }}</h1>
                    <p class="card-text">{{ video.description }}</p>
                    <ul class="list-unstyled text-muted mb-4">
                        <li>
                            <strong>上传者:</strong> 
                            <a target="_blank" href="{{ url_for('user_profile', username=video.uploader) }}" class="text-decoration-none">
                                <img src="{{ url_for('static', filename='uploads/avatars/' + uploader.avatar_filename) if uploader.avatar_filename else url_for('static', filename='images/default_avatar.png') }}" 
                                     alt="上传者头像" class="rounded-circle" style="width: 30px; height: 30px;">
                                <span class="ms-2">{{ video.uploader }}</span>
                            </a>
                        </li>
                        <li><strong>上传时间:</strong> {{ video.upload_time }}</li>
                        <li><strong>播放次数:</strong> {{ video.play_count }}</li>
                        <li><font color="#FF0000">视频由用户自主上传，与该平台无关</font></li>
                    </ul>
                    <a href="{{ url_for('index') }}" class="btn btn-secondary">返回主页</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论区 -->
    <div class="card shadow-lg mb-4">
        <div class="card-body">
            <h3 class="card-title mb-4 text-center">评论区</h3>
            {% if session.logged_in %}
                <form action="{{ url_for('comment') }}" method="POST" class="mb-4">
                    <input type="hidden" name="video_filename" value="{{ video.video_filename }}">
                    <div class="form-group">
                        <textarea name="comment_text" class="form-control" rows="3" placeholder="发表评论..." required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">发送评论</button>
                </form>
            {% else %}
                <p class="text-center">请先<a href="{{ url_for('login', next=url_for('play', video_filename=video.video_filename)) }}">登录</a>后再发表评论。</p>
            {% endif %}

            <!-- 评论列表 -->
            <ul class="list-group">
                {% for comment in comments %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <strong>{{ comment.username }}</strong> ({{ comment.comment_time }}): {{ comment.comment_text }}
                        </div>
                        <div>
                            <span class="badge bg-secondary me-2">点赞数：{{ comment.likes }}</span>
                            {% if session.logged_in %}
                                <form action="{{ url_for('like_comment') }}" method="POST" style="display:inline;">
                                    <input type="hidden" name="video_filename" value="{{ video.video_filename }}">
                                    <input type="hidden" name="comment_index" value="{{ loop.index0 }}">
                                    {% if session['user_id'] in comment.liked_by %}
                                        <button type="button" class="btn btn-sm btn-light disabled">已点赞</button>
                                    {% else %}
                                        <button type="submit" class="btn btn-sm btn-light">点赞</button>
                                    {% endif %}
                                </form>
                            {% endif %}
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

<!-- 引入 DPlayer -->
<!-- <link href="/static/css/DPlayer.min.css" rel="stylesheet">
<script src="/static/js/DPlayer.min.js"></script>
<script src="/static/js/hls.js"></script>
<script src="/static/js/flv.js"></script> -->
<link href="/static/css/BeatifIntredPlayer.min.css" rel="stylesheet">
<script src="/static/js/BeatifIntredPlayer.min.js"></script>

<style>
    /* 自定义播放器样式 
    .dplayer-controller {
        background: rgba(255, 255, 255, 0.9) !important;
    }
    .dplayer-icons .dplayer-icon {
        color: #495057;
    }
    .dplayer-icons .dplayer-icon:hover {
        color: #007bff;
    }
    .dplayer-setting-box {
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid #dee2e6;
    }
    .dplayer-setting-item:hover {
        background-color: #f8f9fa !important;
    } */
</style>
<script>
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        video: {
            url: "{{ url_for('static', filename='uploads/videos/' + video.video_filename) }}",
            pic: "{{ url_for('static', filename='uploads/covers/' + video.cover_filename) }}",
            type: 'auto'
        },
        theme: '#007bff',
        autoplay: false,
        contextmenu: [
            {
                text: '视频信息',
                click: () => {
                    alert(`视频标题：${document.title}\n上传者：{{ video.uploader }}`);
                }
            }
        ],
        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 5, 10],  /* 添加速度选项 */
        settings: ['speed', 'loop'],
        hotkey: true
    });
    
    // 自动记录播放进度
    dp.on('timeupdate', () => {
        localStorage.setItem('videoProgress-{{ video.video_filename }}', dp.video.currentTime);
    });
    
    // 恢复播放进度
    const savedTime = localStorage.getItem('videoProgress-{{ video.video_filename }}');
    if (savedTime) {
        dp.seek(savedTime);
    }
</script>
{% endblock %}